.picture-view {
    width: 100%;
    height: 970px;
    display: block;
    position: relative;
    padding: 10px;
    column-gap: 10px;
    /*overflow-y: scroll;*/
    margin-top: 100px;
    margin-bottom: 20px;
    /*scrollbar-color: #3a3939 transparent;*/
    /*scrollbar-width: thin;*/
}
.painting {
    width: 270px;
    height: 300px;
    break-inside: avoid;
    display: block;
    position: relative;
    float: left;
    cursor: pointer;
    margin-right: 20px;
    overflow: hidden;
    padding: 20px;
    margin-bottom: 20px;
    opacity: 0.8;
    background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(224, 224, 224, 0.5));;
}
.painting:hover {
    transition: .2s ease-in-out;
    opacity: 1;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.3);
}
.picture {
    width: 100%;
    height: 155px;
    display: block;
    background-color: #f5f5f5;
    position: relative;
    overflow: hidden;
}
.picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
}
.picture img:hover {
    transition: .5s ease-in-out;
    transform: scale(1.5);
}
.title {
    width: 100%;
    height: 30px;
    display: block;
    position: relative;
    line-height: 30px;
    text-overflow: ellipsis;
    max-lines: 1;
    text-align: left;
}

.main-cont__list .picture-item {
    position: relative;
    top: 0;
    float: left;
    margin-bottom: 30px;
    margin-right: 20px;
    box-sizing: border-box;
    transition: top 0.2s;

}
.w-80 {
    width: 360px;
    height: 200px;

}
.p-3 {
    padding: .75rem
}
.relative {
    position: relative
}
.block {
    display: block
}
.overflow-hidden {
     overflow: hidden
}
.rounded {
    border-radius: .25rem
}
.group:hover .group-hover\:scale-105 {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:opacity-80 {
    opacity: .8
}
.transition-all {
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
}
.duration-500 {
    -webkit-transition-duration: .5s;
    transition-duration: .5s
}
.w-full {
    width: 360px;
    height: 200px;
}
.absolute {
    position: absolute
}
.inset-3 {
    inset: 0.75rem
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.items-end {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}
.cursor-pointer {
    cursor: pointer
}
.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}
.opacity-0 {
    opacity: 0
}
.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}
.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity))
}
.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.font-medium {
    font-weight: 500
}

